import shou from "./index.module.css"
import React, { Component } from 'react'
import 'antd/dist/antd.css';

import * as echarts from 'echarts';

export default class Shou extends Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }
    componentDidMount(){

        //原点图Shou_leida__2Yezj
        var myChart = echarts.init(this.yuandian, 'dark');

        myChart.setOption( {
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'value'
            },
            dataZoom: [
                {
                    type: 'slider',
                    start: 1,
                    end: 35
                }
            ],
            series: [
                {
                    name: 'scatter',
                    type: 'scatter',
                    itemStyle: {
                        normal: {
                            opacity: 0.8
                        }
                    },
                    symbolSize: function (val) {
                        return val[2] * 40;
                    },
                    data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
                }
            ]
        })

        //条形图 
        let abj = echarts.init(this.tiao);
        abj.setOption({
            title: {
                text: '月投资百分比'
            },
            tooltip: {},
            xAxis: {
                data: ['1月', '2月', '3月', '4月', '5月', '6月','7月','8月','9月','10月',"11月",'12月']
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [60, 50, 36, 100, 105, 320 , 210 , 190 , 100 , 123 , 200,500]
            }]
        });
        
        //扇形图
        var app = {};
        var myChart = echarts.init(this.shan);
        var option
        option = {
            title: {
                text: '大数据分析',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['投资资金', '投资人数', 'echar', 'dom', '搜索引擎']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: 335, name: '投资资金'},
                        {value: 310, name: '投资人数'},
                        {value: 234, name: 'echar'},
                        {value: 135, name: 'dom'},
                        {value: 1548, name: '搜索引擎'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        
        app.currentIndex = -1;
        
        setInterval(function () {
            var dataLen = option.series[0].data.length;
            // 取消之前高亮的图形
            myChart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: app.currentIndex
            });
            app.currentIndex = (app.currentIndex + 1) % dataLen;
            // 高亮当前图形
            myChart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: app.currentIndex
            });
            // 显示 tooltip
            myChart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: app.currentIndex
            });
        }, 1000);
        
        option && myChart.setOption(option);

        //雷达图
        // console.log("this.myInput",this.dong)
        var myChart = echarts.init(this.dong);
        var leida;

        var item1 = {
            color: '#F54F4A'
        };
        var item2 = {
            color: '#FF8C75'
        };
        var item3 = {
            color: '#FFB499'
        };

        var data = [{
            children: [{
                value: 5,
                children: [{
                    value: 1,
                    itemStyle: item1
                }, {
                    value: 2,
                    children: [{
                        value: 1,
                        itemStyle: item2
                    }]
                }, {
                    children: [{
                        value: 1
                    }]
                }],
                itemStyle: item1
            }, {
                value: 10,
                children: [{
                    value: 6,
                    children: [{
                        value: 1,
                        itemStyle: item1
                    }, {
                        value: 1
                    }, {
                        value: 1,
                        itemStyle: item2
                    }, {
                        value: 1
                    }],
                    itemStyle: item3
                }, {
                    value: 2,
                    children: [{
                        value: 1
                    }],
                    itemStyle: item3
                }, {
                    children: [{
                        value: 1,
                        itemStyle: item2
                    }]
                }],
                itemStyle: item1
            }],
            itemStyle: item1
        }, {
            value: 9,
            children: [{
                value: 4,
                children: [{
                    value: 2,
                    itemStyle: item2
                }, {
                    children: [{
                        value: 1,
                        itemStyle: item1
                    }]
                }],
                itemStyle: item1
            }, {
                children: [{
                    value: 3,
                    children: [{
                        value: 1
                    }, {
                        value: 1,
                        itemStyle: item2
                    }]
                }],
                itemStyle: item3
            }],
            itemStyle: item2
        }, {
            value: 7,
            children: [{
                children: [{
                    value: 1,
                    itemStyle: item3
                }, {
                    value: 3,
                    children: [{
                        value: 1,
                        itemStyle: item2
                    }, {
                        value: 1
                    }],
                    itemStyle: item2
                }, {
                    value: 2,
                    children: [{
                        value: 1
                    }, {
                        value: 1,
                        itemStyle: item1
                    }],
                    itemStyle: item1
                }],
                itemStyle: item3
            }],
            itemStyle: item1
        }, {
            children: [{
                value: 6,
                children: [{
                    value: 1,
                    itemStyle: item2
                }, {
                    value: 2,
                    children: [{
                        value: 2,
                        itemStyle: item2
                    }],
                    itemStyle: item1
                }, {
                    value: 1,
                    itemStyle: item3
                }],
                itemStyle: item3
            }, {
                value: 3,
                children: [{
                    value: 1,
                }, {
                    children: [{
                        value: 1,
                        itemStyle: item2
                    }]
                }, {
                    value: 1
                }],
                itemStyle: item3
            }],
            itemStyle: item1
        }];

        leida = {
            series: {
                radius: ['15%', '80%'],
                type: 'sunburst',
                sort: null,
                emphasis: {
                    focus: 'ancestor'
                },
                data: data,
                label: {
                    rotate: 'radial'
                },
                levels: [],
                itemStyle: {
                    color: '#ddd',
                    borderWidth: 2
                }
            }
        };

        leida && myChart.setOption(leida);
    }
    render() {
        return (
            <div id={shou.box}>
                <h1 className={shou.tou}>首页</h1>
                <div className={shou.dao}>
                    <div className={shou.daobox1}>
                        <a href="https://blog.csdn.net/weixin_52755319" target="_blank">
                            <div className={shou.minbox}>
                                <li className={shou.minli}>年度总盈亏</li>
                                <h2 className={shou.minh2}>
                                    <li className={shou.minli1}>68</li>(千万元)
                                </h2>
                            </div>
                        </a>
                        <a href="https://blog.csdn.net/weixin_52755319" target="_blank">
                            <div className={shou.minbox1}>
                                <li className={shou.minli}>年度收益率</li>
                                <h2 className={shou.minh2}>
                                    <li className={shou.minli1}>120</li>(%)
                                </h2>
                            </div>
                        </a>
                    </div>
                    <div className={shou.daobox2}>
                        <a href="https://blog.csdn.net/weixin_52755319" target="_blank">
                            <div className={shou.minbox2}>
                                <li className={shou.minli}>潜在投资人</li>
                                <h2 className={shou.minh2}>
                                    <li className={shou.minli1}>68</li>(人)
                                </h2>
                            </div>
                        </a> 
                        <a href="https://blog.csdn.net/weixin_52755319" target="_blank">
                            <div className={shou.minbox3}>
                                <li className={shou.minli}>意向投资人</li>
                                <h2 className={shou.minh2}>
                                    <li className={shou.minli1}>68</li>(人)
                                </h2>
                            </div>
                        </a> 
                        <a href="https://blog.csdn.net/weixin_52755319" target="_blank">
                            <div className={shou.minbox4}>
                                <li className={shou.minli}>待审投资人</li>
                                <h2 className={shou.minh2}>
                                    <li className={shou.minli1}>68</li>(人)
                                </h2>
                            </div>
                        </a> 
                        <a href="https://blog.csdn.net/weixin_52755319" target="_blank">
                            <div className={shou.minbox5}>
                                <li className={shou.minli}>审核中投资人</li>
                                <h2 className={shou.minh2}>
                                    <li className={shou.minli1}>68</li>(人)
                                </h2>
                            </div>
                        </a> 
                    </div>
                </div>
                <div className={shou.shanxing}>
                    <div className={shou.shanxingbox} ref={(ref)=>{this.dong = ref}} >
                    
                    </div>
                    <div className={shou.zhexian} ref={(ref)=>{this.shan = ref}} >
                    
                    </div>
                    <div className={shou.leida} ref={(ref)=>{this.yuandian = ref}} >
                    
                    </div>
                </div>
                <div className={shou.tiaoxing} ref={(ref)=>{this.tiao = ref}} ></div>
            </div>
        )
    }

}
